<template>
  <div class="right-top-wrap">
    <Card>
      <div slot="title" class="clearfix">
        表具使用年限统计直方图
        <span class="fr">总表数: {{meterTotal}}</span>
      </div>
      <div class="char-box">
        <h-bar3d
          :defaultOptions="hBar3dOptions"
          :fetchData="loadHBarCharData"
          :chartData="seriesData"
          :shrink="collapseIcon"
        />
      </div>
    </Card>
    <Modal
      v-model="showTreemapTableModel"
      class="candlestick-modal"
      title="详情"
      @on-cancel="onTreemapTableCancel"
      width="96%"
      :styles="{ top: '30px', height: '85%' }"
    >
      <div :is="treemapTableTemplate" :options="treemapTaleOptions"></div>
      <div slot="footer">
        <Button @click="onTreemapTableCancel" ghost>关闭</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import { merge, each, isNumber } from 'lodash'
import { createNamespacedHelpers } from 'vuex'
import { hBar3dOptions } from './chartOptions'
const { mapState, mapActions } = createNamespacedHelpers('meterManageDestribution')

export default {
  name: 'distribution-right-top',
  components: {
    HBar3d: () => import('@/commons/charts/HBar3d'),
    GasNatureTreemapAndTable: () => import('../GasNatureTreemapAndTable')
  },
  data() {
    return {
      showTreemapTableModel: false,
      treemapTaleOptions: {
        year: null
      },
      treemapTableTemplate: null
    }
  },
  computed: {
    ...mapState(['hBarChartList', 'collapseIcon', 'qsScore', 'ycsjScore']),
    seriesData() {
      const _this = this
      const _xAxisList = []
      const _serList = []
      each(this.hBarChartList, item => {
        const { year, count } = item
        _xAxisList.push(year)
        _serList.push(count)
      })
      return merge({}, hBar3dOptions, {
        plotOptions: {
          series: {
            cursor: 'pointer',
            events: {
              click: function(e) {
                _this.barLineClickHandle(e, this)
              }
            }
          }
        },
        xAxis: {
          categories: _xAxisList
        },
        series: [
          {
            data: _serList
          }
        ]
      })
    },
    hBar3dOptions() {
      return hBar3dOptions
    },
    meterTotal() {
      let _total = 0
      each(this.hBarChartList, item => {
        const { count } = item
        if (isNumber(parseInt(count))) {
          _total += count
        }
      })
      return _total
    }
  },
  methods: {
    ...mapActions(['loadHBarCharData']),
    barLineClickHandle(data) {
      const year = data.point.x + 1
      this.treemapTaleOptions = {
        ...this.treemapTaleOptions,
        missRate: this.qsScore,
        abnormalRate: this.ycsjScore,
        year
      }
      this.showTreemapTableModel = true
      this.$nextTick(() => {
        this.treemapTableTemplate = 'GasNatureTreemapAndTable'
      })
    },
    onTreemapTableCancel() {
      this.showTreemapTableModel = false
      this.treemapTableTemplate = null
    }
  }
}
</script>
<style lang="less" scoped>
.right-top-wrap {
  width: 100%;
  height: 100%;

  .char-box {
    width: 100%;
    height: 100%;
  }
}
</style>
